<template>
  <div class="view-content">
    <div class="card-box">
      <img src="@/assets/home/logo.png" alt="" />
      <div class="list">
        <div>当前状态: <span>待支付</span></div>
        <div>支付方式: <span>微信</span></div>
        <!-- <div>交易单号: <span>待支付</span></div> -->
        <!-- <div>商户单号: <span>待支付</span></div> -->
      </div>
      <div class="d-flex j-sb">
        <div class="btn total">合计: {{ route.query.total }}</div>
        <div class="btn pay" @click="pay">立即支付</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
//引入
// import { wexinPay } from "@/utils/wechatPay";
import { postBillPay, postJsapiSignature } from "@/api/index";
//根据订单信息从后台获取微信配置参数(和后台商定数据格式,作相应的处理)
import { getCurrentInstance } from "vue";
import { Notify } from 'vant';
const { proxy } = getCurrentInstance();
const detail = ref({
  // status: "待支付",
  // status: "待支付",
  // status: "待支付",
  // total: "2000.00",
});
onMounted(() => {});
const route = useRoute();
const router = useRouter();
// 支付订单
const pay = () => {
  // 先调取获取微信jsp方法所需参数
  postJsapiSignature({
    url: window.location.href.split("#")[0],
  }).then((res) => {
    const { appId, timestamp, nonceStr, signature } = res.data;
    proxy.$wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: appId, // 必填，公众号的唯一标识
      timestamp: timestamp, // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名
      jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
    });
    proxy.$wx.ready(() => {
      postBillPay({
        // id: route.query.id ,
      }).then((res1) => {
        const { timeStamp, nonceStr, packageValue, paySign, signType } =
          res1.data;
        proxy.$wx.chooseWXPay({
          timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
          package: packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: paySign, // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            Notify({ type: "success", message: "支付成功" });
            router.go(-1)
          },
          fail: function (err) {
            Notify({ type: "success", message: err });
          },
        });
      });
    });
  });

  // postBillPay({
  //   id: route.query.id || 1,
  // }).then((res) => {
  //   //调用封装的支付函数
  //   wexinPay(res.data)
  //     .then((res) => {
  //       Notify({ type: "success", message: "支付成功" });
  //     })
  //     .catch((err) => {
  //       console.log("支付失败");
  //     });
  // });
};
</script>

<style lang="less" scoped>
.view-content {
  background: #f8f8f8;
}
.card-box {
  background: #fff;
  box-shadow: 0 0 10px #f1f1f1;
  padding: 200px 48px 32px;
  margin: 200px 32px;
  border-radius: 16px;
  position: relative;
  img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    // background: #eee;
  }
  .list {
    display: flex;
    flex-direction: column;
    font-size: 32px;
    gap: 40px;
    margin-bottom: 100px;
    span {
      margin-left: 16px;
    }
  }

  .btn {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 40px;
    font-size: 28px;
    padding: 8px 32px;
    color: #181818;
    flex: 1;
    &.total {
      background: #f3f2f2;
      margin-right: 32px;
    }
    &.pay {
      background: #fedc00;
    }
  }
}
</style>
